【uniapp】跨域代理及一些常见问题：

您所在的位置：网站首页 › uniapp 跨域代理 › 【uniapp】跨域代理及一些常见问题：

【uniapp】跨域代理及一些常见问题：

#【uniapp】跨域代理及一些常见问题：| 来源: 网络整理| 查看: 265

1、法一： manifest.json文件 "h5": { "devServer": { "port": 8000, "disableHostCheck": true, "proxy": { "/api": { "target": "http://121.204.170.197:8000/i8",//代理的接口 "changeOrigin": true,//是否跨域 "secure": false, // 设置支持https协议的代理 //"pathRewrite": { "^/api": "" } //如需去掉前缀则加上此配置 }, //"/web": { // "target": "http://121.204.170.197:8000/i8", // "changeOrigin": true,//是否跨域 // "secure": false // 设置支持https协议的代理 // //"pathRewrite": { "^/web": "" } //如需去掉前缀则加上此配置 //} } }, } 2、法二： vue.config.js文件=>vue中跨域是一样的 // 跨域配置 module.exports = { devServer: { //记住，别写错了devServer//设置本地默认端口选填 port: 8000, proxy: { //设置代理，必须填 '/api': { //设置拦截器拦截器格式斜杠+拦截器名字，名字可以自己定 target: 'http://121.204.170.197:8000/i8', //代理的目标地址 changeOrigin: true, //是否设置同源，输入是的 pathRewrite: { //路径重写 '/api': '' //选择忽略拦截器里面的单词 } }, //'/web': { //设置拦截器拦截器格式斜杠+拦截器名字，名字可以自己定 // target: 'http://121.204.170.197:8000/i8', //代理的目标地址 // changeOrigin: true, //是否设置同源，输入是的 // pathRewrite: { //路径重写 // '/web': '' //选择忽略拦截器里面的单词 // } //} } } } 3、使用： manifest.json优先级高于vue.config.js uni.request({ url: '/api/PMS/MwApi/GetMwBaseData',// /api要与上面的/api一致 //url: '/api'+'/PMS/MwApi/GetMwBaseData',// /api要与上面的/api一致 //url: '/web/PMS/MwApi/GetMwBaseData', method: 'GET', data: { pageIndex: '0', // string 是页码 0 pageSize: '20', // string 是每页条数 20 method: 'Enterprise', // string 是业务类型 Enterprise searchKey: that.consignee, // string 否模糊查询（支持名称和编码）无 updateTime: '', // datetime 否更新时间（查询该时间之后插入和更新的数据） 2021-07-27 17:15:59.210 }, success: (res) => { if (res.statusCode == 200) { console.log(res.data) } else { uni.showToast({ title: res.data.ErrorMessage, icon: 'none' }) } }, fail: (err) => { uni.showToast({ title: err.ErrorMessage, icon: 'none' }) }, }); 4、跨域代理不成功的原因：

uniapp跨域报错Faild to load response data: No resourse with given identifier found

1、"pathRewrite": { "^/api": "" } 需要的没加，不需要的加上了 2、项目没有重新启动,刷新是不生效的 3、地址，逗号，源码等有误=》如http://121.204.170.197:8000/i8后面还有/i8,容易被遗忘 4、请求头不正确等 5、部署配置:

uniapp跨域官网

（1）安装egg-cors包

npm i egg-cors --save

（2）在plugin.js中设置开启cors

'use strict'; /** @type Egg.EggPlugin */ module.exports = { cors: { enable: true, package: 'egg-cors', }, }

（3）在config.default.js中配置

config.security = { domainWhiteList: ['*'], //允许访问接口的白名单(跨域地址要允许你的服务器地址访问)，例如：http://localhost:8080 *表示均可访问 }; //cors // config.cors = { // origin: "*", // allowMethods: "GET, HEAD, PUT, POST, DELETE, PATCH", // credentials: true // }

在这里插入图片描述

6.遇到问题：

在这里插入图片描述

让后端配置CORS吧 7. import Vue from 'vue' import axios from 'axios' // 创建axios对象 const service = axios.create({ baseURL: 'http://192.168.8.237:8002/api/', // 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。 // 注意：withCredentials和后端配置的cros跨域不可同时使用 //withCredentials: true, // 请求超时时间 timeout: 10000, // 是否跨域请求 crossDomain: true, // headers:{ // "Content-Type":"application/json;charset:utf-8", // }, headers:{ "Content-Type":"multipart/form-data", }, }) // request拦截器,在请求之前做一些处理 service.interceptors.request.use(config => { //请求时显示正在加载中 uni.showLoading({ title: '加载中~' }); //添加请求头，比如从本地缓存获取token if (uni.getStorageSync("Token")) { config.headers['token'] = uni.getStorageSync('Token') } return config; }, error => { return Promise.reject(error); } ); // 配置成功后的拦截器 service.interceptors.response.use(res => { //请求时成功后关闭正在加载中 uni.hideLoading(); // 根据个人后端结构自定义,原文是if (res.data.status == 200)，而我这里需要是res.status if(res.data.msg=="过期"){ uni.showToast({ title:"登陆有效期已过，请重新登陆~", icon:"error" }) setTimeout(function() { uni.navigateTo({ url:"/pages/login/login" }) }, 1000); } if (res.status == 200) { return res.data } else { // 原文是 Promise.reject(res.data.msg)，但我这里变量名称是message return Promise.reject(res.data.message); } }, error => { console.log(error) if(error.message=="timeout of 10000ms exceeded"){ uni.showToast({ title:"请求超时~", icon:'error' }) } if (error.response.status) { switch (error.response.status) { case 401: break; default: break; } } return Promise.reject(error) }) // 在main.js中放入这段自定义适配器的代码，就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求，并支持携带cookie axios.defaults.adapter = function(config) { return new Promise((resolve, reject) => { let settle = require('axios/lib/core/settle'); let buildURL = require('axios/lib/helpers/buildURL'); uni.request({ methods: config.methods.toUpperCase(), url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer), header: config.headers, data: config.data, dataType: config.dataType, responseType: config.responseType, sslVerify: config.sslVerify, complete: function complete(response) { response = { data: response.data, status: response.statusCode, errMsg: response.errMsg, header: response.header, config: config }; settle(resolve, reject, response); } }) }) } export default service main.js里面: import axios from 'utils/https.js'; Vue.prototype.$axios = axios;

在这里插入图片描述

【本文地址】

【uniapp】跨域代理及一些常见问题：

【uniapp】跨域代理及一些常见问题：

今日新闻

推荐新闻